<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Main</title>
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
    <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
    <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <i-layout>
        <i-header></i-header>
        <i-content style="padding: 50px; user-select: none">
            <Card>
                <Row>
                    <i-col span="2">
                        <div>
                            <Upload
                                    :accept="'xlsx'"
                                    :show-upload-list="false"
                                    :default-file-list="fileList"
                                    :on-success="uploadSuccess"
                                    action="/data/upload"
                            >
                                <i-button icon="ios-cloud-upload-outline">上传数据文件</i-button>
                            </Upload>
                        </div>
                        <div v-if="!!cachedList.length" style="margin-top: 25px">
                            <i-button type="primary" icon="md-analytics" @click="createAnalyze">生成分析图形</i-button>
                        </div>
                    </i-col>
                    <i-col span="20" offset="1">
                        <div v-if="hasCates">
                            <CheckboxGroup v-model="checkAllCate">
                                <Checkbox v-for="c in cateList" style="min-width: 80px" label="{{c}}" @onchange="select => this.addToCateSelect(select, c)">{{c}}</Checkbox>
                            </CheckboxGroup>
                        </div>
                    </i-col>
                </Row>
                <Row style="margin-top: 25px" v-if="!!cachedList.length">
                    <i-col style="padding-left: 25px">
                        <h4>数据信息</h4>
                        <CheckboxGroup v-model="checkAllFile">
                            <Checkbox v-for="c in cachedList" style="min-width: 80px" @onchange="select => this.addToFileSelect(select, c)">{{c}}</Checkbox>
                        </CheckboxGroup>
                    </i-col>
                </Row>
            </Card>
        </i-content>
    </i-layout>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            cachedList: [],
            fileList: [],
            cateList: [],
            checkAllCate: [],
            checkAllFile: []
        },
        methods: {
            uploadSuccess: function (response, file, fileList) {
                this.$Message.info("上传成功！");
                this.cachedList = response;
                this.fetchCates();
            },
            fetchCates: function () {
                var vue = this;
                axios
                    .get("/data/cates")
                    .then(function (resp) {
                        vue.cateList = resp.data
                    }).catch(function (err) {
                    vue.$Message.error(err.status)
                });
            },
            fetchCached: function () {
                var vue = this;
                axios
                    .get("/data/cached")
                    .then(function (resp) {
                        vue.cachedList = resp.data
                    }).catch(function (err) {
                    vue.$Message.error(err.status)
                })
            },
            createAnalyze: function() {
                if (!this.checkAllFile.length) {
                    this.$Notice.warning({
                        title: '没有选择数据集合',
                        desc: '请至少选择一个数据集合',
                        duration: 0
                    });
                    return;
                }
            },
            addToCateSelect: function (select, cate) {
                var index = -1;
                for (var i = 0; i < this.cateList.length; i++ ) {
                    if (this.cateList[i] === cate) {
                        index = i
                    }
                }
                if (select) {
                    if (index === -1) {
                        this.cateList.push(cate)
                    }
                }else {
                    if (index > -1) {
                        this.cateList.splice(index, 1)
                    }
                }
                console.log(this.cateList)
            },
            addToFileSelect: function (select, file) {
                var index = -1;
                for (var i = 0; i < this.cachedList.length; i++ ) {
                    if (this.cachedList[i] === file) {
                        index = i
                    }
                }
                if (select) {
                    if (index === -1) {
                        this.cachedList.push(file)
                    }
                }else {
                    if (index > -1) {
                        this.cachedList.splice(index, 1)
                    }
                }
                console.log(this.cachedList)
            }
        },
        mounted: function () {
            this.fetchCates();
            this.fetchCached();
        },
        computed: {
            hasCates: function () {
                return !!this.cateList
            }
        }
    })
</script>
</body>
</html>